<template>
  <div class="background">
    <van-nav-bar
      left-arrow
      title="同城安装"
      @click-left="$router.go(-1)"
    />
    <!--    <van-sticky>-->
    <!--      <div class="demo-nav" style>-->
    <!--        <div class="demo-nav__title">装修施工</div>-->
    <!--        <router-link :to="'/DecorationProcess'" class="demo-nav__back">-->
    <!--          <svg viewBox="0 0 1000 1000">-->
    <!--            <path fill="#969799" fill-rule="evenodd"-->
    <!--                  d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">-->
    <!--            </path>-->
    <!--          </svg>-->
    <!--        </router-link>-->
    <!--      </div>-->

    <!--    </van-sticky>-->

    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img width="375" height="375" class="img_tu" v-lazy="image.conUrl"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--<div v-for="item in indexfindList">-->
    <div>

      <div class="commodity-details-a">
        <van-row>
          <van-col span="18" style="text-align: left">
            <p style="font-weight: bolder;margin-bottom: 0.5rem">{{detaList.constructionName}}</p>
            <p style="display: inline-block">￥<span
              style="font-size: 1.5rem;font-weight: bolder">{{detaList.price}}</span></p>
            <p style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">销量:<span>{{this.xiaoshoushu}}</span></p>
          </van-col>
          <van-col span="6" style="text-align: right">
            <!--            <van-icon name="share-o" size="22"/>-->
            <!--<p>分享</p>-->
            <!--            <van-button @click="fenxiang">aa</van-button>-->
          </van-col>
        </van-row>
      </div>

      <div class="commodity-details-b">
        <div class="shop_home-b">
          <van-row>
            <van-col span="18" style="text-align: left">
              <van-tag plain type="primary" color="red">店铺优惠券</van-tag>
            </van-col>
            <van-col span="6" style="text-align: right;padding-right: 0.5rem;position: relative">
              <p style="color:red;font-size: 0.9rem;display: inline-block" @click="showCoupon = true">领券
                <van-icon name="arrow" size="13" color="red"/>
              </p>
            </van-col>
          </van-row>
        </div>
      </div>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"></van-divider>
      <div>
        <van-row type="flex">
          <van-col span="5">
            <van-image width="2rem" height="2rem" src="https://i.52112.com/icon/jpg/256/20200505/76859/3243626.jpg"/>
          </van-col>
          <van-col span="19">
            <van-row class="cx">
              <van-col span="19">商家已缴纳{{detaList.balanceMoney}}元诚信金作为所售商品及服务的质量担保金</van-col>
              <van-row>
                <van-col span="19"></van-col>
              </van-row>
            </van-row>

          </van-col>
        </van-row>
      </div>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"></van-divider>
      <van-cell is-link @click="showPopup">
        <van-grid>
          <div>店铺地址: {{detaList.address}}</div>
<!--          <div class="you_mi" align="right">1.8km</div>-->
<!--          <div><p>营业时间: 24小时</p></div>-->
        </van-grid>
      </van-cell>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0px' }"></van-divider>
      <!--<div>-->
      <!--<van-grid column-num="5" :border="false">-->
      <!--<van-grid-item icon="friends" text="特色服务" @click="teseButton(detaList.constructionId)"></van-grid-item>-->
      <!--<van-grid-item icon="column" text="资质荣誉"></van-grid-item>-->
      <!--<van-grid-item icon="thumb-circle" text="施工擅长" />-->
      <!--<van-grid-item icon="comment" text="案例展示" />-->
      <!--<van-grid-item icon="volume" text="服务区域" />-->
      <!--</van-grid>-->
      <!--</div>-->
      　
      <van-grid class="fiveicon" :border="false" :column-num="5">
        <van-grid-item @click="teseButton(detaList.constructionId)">
          <img src="../../image/featureserve.png" alt="">
          <p style="font-size: 0.8rem">特色服务</p>
        </van-grid-item>
        <van-grid-item @click="handleScroll('one')">
          <img src="../../image/certification.png" alt="">
          <p style="font-size: 0.8rem">资质荣誉</p>
        </van-grid-item>
        <van-grid-item @click="shanchangButton(detaList.constructionId)">
          <img src="../../image/adept.png" alt="">
          <p style="font-size: 0.8rem">施工擅长</p>
        </van-grid-item>
        <van-grid-item @click="handleScroll('two')">
          <img src="../../image/CaseShow.png" alt="">
          <p style="font-size: 0.8rem">案例展示</p>
        </van-grid-item>
        <van-grid-item @click="fuwuButton(detaList.constructionId)">
          <img src="../../image/coverage .png" alt="">
          <p style="font-size: 0.8rem">服务区域</p>
        </van-grid-item>
      </van-grid>

      <van-cell is-link @click="show = true"><span style="color: rgba(113, 112, 112, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-bold;">已选</span> <span style="color: rgba(102, 102, 102, 100);
font-size: 12px;
text-align: left;
font-family: PingFangSC-regular;">选择 规格</span></van-cell>
      <div style="padding: 0rem 1rem 0rem 1rem">


        <div align="left">
          <van-row>
            <van-col span="24"><b><span style="color: rgba(16, 16, 16, 100);
font-size: 20px;
text-align: left;
font-family: SourceHanSansSC-bold;">服务</span></b></van-col>
          </van-row>
<!--          <van-row>-->
<!--            <van-col span="10"><span style="color: rgba(91, 91, 91, 100);-->
<!--font-size: 16px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular;">队伍/公司名称</span></van-col>-->
<!--            <van-col span="7" style="color: rgba(16, 16, 16, 100);-->
<!--font-size: 14px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular;">{{detaList.supplierName}}-->
<!--            </van-col>-->
<!--            <van-col span="7"></van-col>-->
<!--            <van-col span="8"></van-col>-->
<!--          </van-row>-->
<!--          <hr/>-->
          <van-row style="line-height:2rem">
            <van-col span="10">手机号</van-col>
            <van-col span="7" style="color: rgba(16, 16, 16, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;">{{detaList.phoneNumber}}
            </van-col>
            <van-col span="7"></van-col>
            <van-col span="8"></van-col>
          </van-row>
          <hr/>
          <van-row style="display:flex;flex-direction: column;line-height:2rem">
            <van-col span="10">简介</van-col>
            <van-col span="12" style="color: rgba(16, 16, 16, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;">{{detaList.descript}}
            </van-col>
            <!--            <van-col span="7"></van-col>-->
            <!--            <van-col span="8"></van-col>-->
          </van-row>
          <hr/>
<!--          <van-row>-->
<!--            <van-col span="24"><span style="color: rgba(91, 91, 91, 100);-->
<!--font-size: 16px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular;">业务分类：</span></van-col>-->
<!--          </van-row>-->
<!--          <van-row>-->
<!--            <van-col span="24">-->
<!--              <b>-->
<!--              <span style="color: rgba(91, 91, 91, 100);-->
<!--font-size: 14px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular; ">业务分类业务分类业务分类业务分类业务分类业</span>-->
<!--              </b>-->
<!--            </van-col>-->
<!--          </van-row>-->
<!--          <van-row>-->
<!--            <van-col span="24"><span style="color: rgba(91, 91, 91, 100);-->
<!--font-size: 16px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular;">业务范围：</span></van-col>-->
<!--          </van-row>-->
<!--          <van-row>-->
<!--            <van-col span="24">-->
<!--              <b>-->
<!--              <span style="color: rgba(91, 91, 91, 100);-->
<!--font-size: 14px;-->
<!--text-align: left;-->
<!--font-family: PingFangSC-regular;">业务范围业务范围业务范围业务范围</span>-->
<!--              </b>-->
<!--            </van-col>-->
<!--          </van-row>-->
        </div>
      </div>
      <van-row id="two">
        <van-col span="24">
          <van-cell is-link @click="anliButton(detaList.constructionId)">
            <!--<van-cell is-link :to="'/DecorateACase'">-->
            <!--<b>施工案例</b> （12） <span align="left">查看全部</span> -->
            <van-row>
              <van-col span="6"><b>施工案例</b></van-col>
              <van-col span="3"></van-col>
              <van-col span="3"></van-col>
              <van-col span="6"></van-col>
              <van-col span="6" :click="quanbu" style="color: rgba(91, 91, 91, 100);">
                查看全部
              </van-col>
            </van-row>
          </van-cell>
        </van-col>
      </van-row>

<!--      <div>-->
<!--        &lt;!&ndash;这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转&ndash;&gt;-->
<!--        <van-grid :column-num="2" :square="true" :border="false">-->
<!--          <van-grid-item @click="toConstruction(index.caseId,index.constructionId)">-->
<!--            <van-image-->
<!--              width="10rem"-->
<!--              height="9rem"-->
<!--              :src="index.casePicurl"-->
<!--            />-->
<!--          </van-grid-item>-->
<!--          <van-grid-item @click="toConstruction(index.caseId,index.constructionId)" align="left">-->
<!--            <div class="fore">-->
<!--              &lt;!&ndash;                <p style="font-size: 1.2rem">户型面积: {{index.doorArea}}㎡</p>&ndash;&gt;-->
<!--              &lt;!&ndash;                <p style="font-size: 1.2rem">装修报价: {{index.decoratePrice}}万</p>&ndash;&gt;-->
<!--              &lt;!&ndash;                <p style="font-size: 1.2rem">装修风格: {{index.decorStyle}} </p>&ndash;&gt;-->
<!--              &lt;!&ndash;                <p style="font-size: 1.2rem">设计师: {{index.stylist}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--          </van-grid-item>-->
<!--        </van-grid>-->
<!--      </div>-->

      <!--<div style="padding: 0rem 0.5rem 0rem 0.5rem">-->


      <div id="one" style="padding-bottom: 10%" align="left">
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23"><b>资质荣誉</b></van-col>
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">营业执照
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange1" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongOne">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current1 + 1 }}/{{RongOne.length}}</div>
              </template>
            </van-swipe>
          </div>
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">施工资质
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange2" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongTwo">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current2 + 1 }}/{{RongTwo.length}}</div>
              </template>
            </van-swipe>
          </div>
          <!--<van-col span="24">-->
          <!--<van-swipe :loop="false" :width="250">-->
          <!--<van-swipe-item v-for="item in RongTwo">-->
          <!--<van-image-->
          <!--width="12rem"-->
          <!--height="11rem"-->
          <!--fit="contain"-->
          <!--style="display: inline-block;padding: 0 5px"-->
          <!--:src="item.conUrl"-->
          <!--/>-->
          <!--</van-swipe-item>-->
          <!--</van-swipe>-->
          <!--&lt;!&ndash;<person-scrollsg></person-scrollsg>&ndash;&gt;-->
          <!--</van-col>-->
        </van-row>

        <van-row>
          <van-col span="1"></van-col>
          <van-col span="23" style="color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;margin-top:10px">荣誉证书
          </van-col>
          <div class="image-div">
            <van-swipe @change="onChange3" class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="item in RongThree">
                <van-image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current3 + 1 }}/{{RongThree.length}}</div>
              </template>
            </van-swipe>
          </div>
          <!--<van-col span="24">-->
          <!--<van-swipe :loop="false" :width="250">-->
          <!--<van-swipe-item v-for="item in RongThree">-->
          <!--<van-image-->
          <!--width="12rem"-->
          <!--height="11rem"-->
          <!--fit="contain"-->
          <!--style="display: inline-block;padding: 0 5px"-->
          <!--:src="item.conUrl"-->
          <!--/>-->
          <!--</van-swipe-item>-->
          <!--</van-swipe>-->
          <!--&lt;!&ndash;<person-scrollzs></person-scrollzs>&ndash;&gt;-->
          <!--</van-col>-->
        </van-row>
      </div>
      <!--</div>-->

      <van-popup v-model="showCoupon" round position="bottom" closeable :style="{ height: '70%' }">
        <div class="container">
          <h1 style="color: red;font-size: 18px">优惠卷</h1>
          <div class="coupon-list">
            <div class="sawtooth-bor item" v-for="coupon in 2">
              <div class="pt10 discount" style="padding-top: 10px;">
                <div class="fs12">awdawd</div>
                <div class="fs12">满100减2</div>
                <div class="fs12">有效期2020-9-9 - 2020-10-9</div>
              </div>
              <div class="textc receive">立即领取</div>
            </div>
          </div>
        </div>
      </van-popup>

    </div>

    <van-goods-action>
      <van-goods-action-icon style="width: 8rem" icon="phone-circle-o" text="电话咨询" @click="onClickIcon">
        <a :href="'tel:' + detaList.phoneNumber" rel="external nofollow" ><span style="color: black">电话咨询</span>  </a>
      </van-goods-action-icon>
      <!--<van-goods-action-icon />-->
      <van-goods-action-button type="danger" text="立即购买" @click="purchase"/>
    </van-goods-action>

    <!--<van-goods-action>-->
    <!--<van-goods-action-button icon="phone-circle-o" text="电话服务" />-->
    <!---->
    <!--</van-goods-action>-->
    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota-used="quota_used"
      :show-add-cart-btn="false"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"/>
  </div>
</template>

<script>
  // import { selectProductById,selectProductLableByProId } from '@/api/commodity/shop_product.js'
  import {findAllList,findAllByIdCon} from "@/api/constructionTeam/conlabel";
  import {findAllListCase, findAllCaseById, getCaseId, getId} from "@/api/constructionTeam/caseinfo";
  import {
    findAllListBuilding,
    findAllById,
    findAllListDetails,
    getDetailsId,
    selectCpiUrl
  } from "@/api/constructionTeam/building";
  import {instalmentadd} from "@/api/customer/instalment";
  import {Toast} from 'vant';
  import {findAllRongIdOne, findAllRongIdTwo, findAllRongIdThree, findAllRongIdTwoen} from "@/api/commodity/qualifipic";
  import {Swipe, SwipeItem} from 'vant';
  import wx from 'weixin-js-sdk';
  import axios from 'axios'
  import {getSignature, getAccessTokenAndJsapi} from "@/api/fenxiang";


  export default {
    name: "ShopTongcheng",
    components: {
      PersonScrollsg: () => import("@/components/building/personScrollsg.vue"),
      PersonScrollzs: () => import("@/components/building/personScrollzs.vue"),
      PersonScrollzz: () => import("@/components/building/personScrollzz.vue"),
    },
    data() {
      return {

        pricenum: '',
        instalmentIdnum: '',
        form: {
          numpice: '',
          numconstructionId: '',
          numinstalmentState: '',
        },
        show: false,
        caseId: '',
        // indexfindList:[],
        typeOptions: [],
        defaultDictType: "",
        queryparams: {
          pageNum: 1,
          pageSize: 10
        },
        careparams: {
          pageNum: 1,
          pageSize: 10
        },
        goods_id: '',
        closeOnClickOverlay: true,  //点击空白处关闭购物框
        showShare: false,
        // quota: 1, //限购数量 库存旁边显示限购数
        quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
        goods_info: {
          title: '',
          picture: 'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
        },
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [
            {
              k: '规格',
              k_s: 's1',
              v: [],
            },
          ],
          // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
          list: [],
          price: '',  //？？
          stock_num: null, // 商品总库存？？
          none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
          hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
        },
        initialSku: {
          // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
          // 值：skuValueId（规格值 id）
          s1: '1',
          // 初始选中数量
          selectedNum: 1,
        },
        // 查看店铺优惠券
        showCoupon: false,

        detaList: Array,
        index: Array,

        images: [
          // 'https://img.yzcdn.cn/vant/apple-1.jpg',
          // 'https://img.yzcdn.cn/vant/apple-2.jpg',
        ],

        nav_list: [
          //导航数据
          {
            title: "特色服务",
            icon: "photo-fail",
            path: "Introduction",

          },
          {
            title: "资质荣誉",
            icon: "photo-fail",
            path: "my_index",
          },
          {
            title: "施工擅长",
            icon: "photo-fail",
            path: "my_index",
          },
          {
            title: "案例展示",
            icon: "photo-fail",
            path: "my_index",
          },
          {
            title: "服务区域",
            icon: "photo-fail",
            path: "inspection_index",
          }
        ],
        constructionId: Number,
        construction: Object,
        labelQuantity: 9999,
        RongOne: [],
        RongTwo: [],
        RongThree: [],
        queryRong: {
          constructionIdsnum: '',
        },
        //轮播当前页
        current1: 0,
        current2: 0,
        current3: 0,
        xiaoshoushu:'',
      }
    },
    created() {
      const constructionId = this.$route.query && this.$route.query.constructionId;
      this.getId(constructionId);
      this.getDetailsId(constructionId);
      this.constructionId = constructionId;
      this.getSelectCpiUrl(constructionId);


      const supplierId = parseInt(this.$route.query && this.$route.query.supplierId);
      this.findRongIdOne(supplierId);
      this.findRongIdTwo(supplierId);
      this.findRongIdThree(supplierId);
      // this.findRongIdTwo(supplierId);
      this.findfindAllByIdCon(constructionId);
    },


    methods: {

      fuwuButton(constructionId) {
        this.$router.push({
            path: "/fuwu",
            query: {constructionId: constructionId}
          }
        );
      },

      shanchangButton(constructionId) {
        this.$router.push({
            path: "/shanchang",
            query: {constructionId: constructionId}
          }
        );
      },

      findfindAllByIdCon(constructionId){
        findAllByIdCon(constructionId).then(res=>{
          this.xiaoshoushu = res.data.data
        })
      },

      onClickIcon() {

        let url = encodeURIComponent(location.href.split('#')[0]);
        console.log("*****url****" + url)
        // 自定义config
        getAccessTokenAndJsapi(url).then((response) => {

          var res = response.data;
          console.log(res)
          wx.config({
            debug: true, // 开启调试模式
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature,// 必填，签名
            jsApiList: [
              "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
              "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
              "onMenuShareWeibo",//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
            ] // 必填，需要使用的JS接口列表
          })
        }).catch((error) => {
          console.log(error)
        });


        wx.ready(() => {
          wx.updateAppMessageShareData({
            title: '微信自定义分享朋友', // 分享标题
            desc: '微信自定义分享朋友', // 分享描述
            link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://sjbz.fd.zol-img.com.cn/t_s240x320c/g5/M00/00/03/ChMkJ1fJVzuIYa52AAabqdbC5xQAAU-CgPnq3YABpvB522.jpg',
            success: (res => {
              console.log(res);
            })
          });
        });


        wx.updateTimelineShareData({
          title: '微信自定义分享到朋友圈', // 分享标题
          desc: '微信自定义分享到朋友圈', // 分享描述
          link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://sjbz.fd.zol-img.com.cn/t_s240x320c/g5/M00/00/03/ChMkJ1fJVzuIYa52AAabqdbC5xQAAU-CgPnq3YABpvB522.jpg',
          // imgUrl: require('./logo.jpg'), // 分享图标(不能赋相对路径，一定要是绝对路径)
          success: (res) => {
            console.log(res);
          }
        });

        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log(res);
        });


        // Toast("手机号:"+JSON.stringify(this.detaList.phoneNumber));
        // console.log("this.detaList.phoneNumber++"+JSON.stringify(this.detaList.phoneNumber))
      },


      handleScroll(id) {
        var element = document.getElementById(id);
        element.scrollIntoView();
      },


      findRongIdOne(supplierId) {
        findAllRongIdOne(supplierId).then(res => {
          this.RongOne = res.data;
        })
      },

      findRongIdTwo(supplierId) {
        findAllRongIdTwoen(supplierId).then(res => {
          this.RongTwo = res.data;
        })
      },
      findRongIdThree(supplierId) {
        findAllRongIdThree(supplierId).then(res => {
          this.RongThree = res.data;
        })
      },


      purchase() {
        this.show = true;
        findAllList(this.constructionId).then((res) => {
          for (let i = 0; i < res.data.data.length; i++) {
            this.sku.tree[0].v.push({"id": null, "name": null, "imgUrl": null});
            this.sku.tree[0].v[i].id = res.data.data[i].labelId;
            this.sku.tree[0].v[i].name = res.data.data[i].labelName;
            this.sku.tree[0].v[i].imgUrl = res.data.data[i].conUrl;
            this.sku.list.push({
              "id": null,
              "price": null,
              "discount": null,
              "s1": null,
              "goods_id": null,
              "stock_num": null
            });
            this.sku.list[i].s1 = res.data.data[i].labelId;
            this.sku.list[i].stock_num = this.labelQuantity;
            this.sku.list[i].goods_id = res.data.data[i].constructionId;
            this.sku.list[i].price = (res.data.data[i].labelPrice) * 100;
            this.goods_id = res.data.data[i].constructionId;
            this.sku.stock_num += this.labelQuantity;
          }
        })
      },

      onBuyClicked(sku) {
        console.log("*************"+JSON.stringify(sku.selectedNum));
        var shu = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
        var zuizhong = shu*sku.selectedNum;


        this.form.numpice = zuizhong
        this.form.numconstructionId = sku.selectedSkuComb.s1
        this.form.numinstalmentState = Math.floor(Math.random() * 100000000000);
        console.log("***this.form.numpice***" + this.form.numinstalmentState)

        instalmentadd(this.form).then(res => {
          console.log("*****this.form******" + JSON.stringify(this.form))
          this.$router.push({
            path: "/ShigongMateial",
            query: {
              // skuId: sku.selectedSkuComb.s1,
              constructionId: this.$route.query && this.$route.query.constructionId,
              selectedNum: sku.selectedNum,
              pricenum: zuizhong,
              numinstalmentState: this.form.numinstalmentState
            }
          });
        })


      },
      onAddCartClicked(sku) {
        this.$toast('add cart:' + JSON.stringify(sku));
      },


      teseButton(constructionId) {
        this.$router.push({
            path: "/Introduction",
            query: {constructionId: constructionId}
          }
        );
      },

      toBack() {
        this.$router.go(-1);//返回上一层
      },

      anliButton(constructionId) {
        this.$router.push({
            path: "/DecorateACase",
            query: {constructionId: constructionId}
          }
        );
      },

      // TODO: 施工案例查询
      getId(constructionId) {
        getId(constructionId).then(res => {
          this.index = res.data.data;
          console.log(res);
        })
      },

      getDetailsId(constructionId) {
        getDetailsId(constructionId).then(res => {
          this.detaList = res.data.data;
          this.goods_info.picture= res.data.data.conUrlAll;
        })
      },

      customSkuValidator() {
        console.log("************888888")
      },
      quanbu() {
        console.log("************888888")
      },

      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
      },
      onExchange(code) {
        this.coupons.push(coupon);
      },
      showPopup() {

      },

      onEdit() {
        Toast('编辑');
      },
      //施工队图片的轮播
      getSelectCpiUrl(constructionId) {
        selectCpiUrl(constructionId).then((res) => {
          this.images = res.data.data;
        })
      },
      //施工案例详情
      toConstruction(caseId) {
        this.$router.push({path: "/CaseDetails", query: {constructionId: this.constructionId, caseId: caseId}});
      },
      //轮播点击
      onChange1(index) {
        this.current1 = index;
      },
      onChange2(index) {
        this.current2 = index;
      },
      onChange3(index) {
        this.current3 = index;
      },

    }

  }
</script>

<style scoped>
  .commodity-details-a {
    font-family: PingFangSC-regular;
  }

  .cx {

    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .fiveicon {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .fore p {
    /*margin-right: 80px;*/
  }

  .fiveicon img {
    width: 45px;
    height: 45px;
  }

  .commodity-details-a {
    padding: 0.5rem 1rem;
  }

  .commodity-details-a p {
    font-size: 0.8rem;
  }

  .commodity-details-b {
    padding: 0 1rem;
  }

  .sku-container {
    display: none;
  }

  .s-ctn {
    float: left;
    border: 1px solid red;
  }

  /*.img_tu {*/
  /*  width: 100%;*/
  /*  height: 10rem;*/
  /*}*/

  .demo-nav {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }

  .demo-nav__title {
    font-weight: 350;
    font-size: 1.2rem;
    text-transform: capitalize;
  }

  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .shopdet {
    padding: 0.6rem;
  }

  .content {
    padding: 16px 16px 260px;
  }


  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 18px;
  }

  .coupon-list {
    width: 370px;
    margin: 0 auto;
  }

  .coupon-list .item:first-child {
    margin-top: 20px;
  }

  .coupon-list .item {
    width: 370px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  /* 第一个 */
  .sawtooth-bor {
    display: flex;
    color: #fff;
    padding-left: 0.5rem;
    box-sizing: border-box;
    /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
    background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
    /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
    background-size: 30px 28px;
    /* 根据优惠券div大小进行微调 */
    background-position: 16px 0px;
    background-color: #fff;
    position: relative;
  }

  .sawtooth-bor:before {
    content: ' ';
    display: block;
    /* 用相同的颜色覆盖 */
    background-color: #F35C3B;
    /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 为锯齿保留的距离 */
    left: 20px;
    right: 20px;
    z-index: -1;
  }

  .discount {
    border-right: 2px dashed #f5f5f5;
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
    background-color: #F35C3B;
  }

  .receive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffb937;
  }

  .image-div {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 2%;
    width: 95%;
    height: 30%;
    display: inline-block;
  }

  .custom-indicator {
    height: auto;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 30%;
    line-height: 30%;
    text-align: center;
  }

</style>
